<template>
  <div class="customer-add-edit">
    <ul class="details-tab-button">
      <li v-for="(item,index) in customerType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
    </ul>
    <template v-if="currentType=='0'">
      <div class="module-info">
        <mt-cell title="客户性质" :value="post.customerNature" is-link @click.native="handleSelectNature"></mt-cell>
        <mt-field label="客户名称" placeholder="请输入客户名称" v-model="post.bartererName"></mt-field>
        <mt-field label="客户简称" placeholder="请输入客户简称" v-model="post.bartererShortName"></mt-field>
        <mt-cell
          title="结算方式" class="mint-field mint-field-select">
          <select v-model="post.settlementId" class="select-operator">
            <option v-for="item in payList" :value="item.settlementId">{{item.settlement}}</option>
          </select>
        </mt-cell>
        <mt-field label="手机号" placeholder="请输入手机号" v-model="post.telephone"></mt-field>
        <mt-field label="地址" placeholder="请输入地址" v-model="post.address"></mt-field>
      </div>

      <div class="module-other">
        <mt-field label="期初应收款" placeholder="请输入期初应收款" v-model="post.money"></mt-field>
      </div>

      <div class="module-note">
        <span class="note-title">备注信息</span>
        <textarea v-model="post.remarts" class="note-textarea" placeholder="请输入备注信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
      </div>
    </template>
    <div v-if="currentType=='1'" class="module-car">

      <div class="action-add-car">
        <template v-if="myCarList.length>0">已绑定{{myCarList.length}}辆车</template>
        <template v-else>暂无绑定车辆</template>
        <span class="iconfont icon-zengjia" @click="handleCar('add','')"></span>
      </div>
      <mt-cell v-for="(item,index) in myCarList" :title="item.carNo" @click.native="handleCar('edit',item)">
        <span @click.stop="handleDelete(item,index)" class="iconfont icon-shanchu1"></span>
        <span>{{item.carOwner}}-{{item.phone}}</span>
      </mt-cell>
    </div>

    <div class="button-content">
        <mt-button type="primary" @click="handleSurePost">确定</mt-button>
    </div>

    <mt-popup
      v-model="popupAdd"
      position="right"
      class="popup-add">
      <template>
        <mt-field label="车牌号" placeholder="请输入车牌号" v-model="car.carNo"></mt-field>
        <mt-field label="联系人" placeholder="请输入联系人" v-model="car.carOwner"></mt-field>
        <mt-field label="联系电话" placeholder="请输入联系电话" v-model="car.phone"></mt-field>
        <mt-field label="车型" placeholder="请选择车型" v-model="car.name" readonly="readonly" @click.native="handleSelectCar"></mt-field>
        <mt-field label="车架号" placeholder="请输入车架号" v-model="car.vin"></mt-field>
        <!--<mt-field label="车辆注册时间" placeholder="请输入车辆注册时间" v-model="car.carId"></mt-field>-->
        <!--<mt-field label="下次年审时间" placeholder="请输入下次年审时间" v-model="car.carId"></mt-field>-->
        <!--<mt-field label="商业保险公司" placeholder="请输入商业保险公司" v-model="car.carId"></mt-field>-->
        <!--<mt-field label="下次保险时间" placeholder="请输入下次保险时间" v-model="car.carId"></mt-field>-->
        <!--<mt-field label="交强险公司" placeholder="请输入交强险公司" v-model="car.carId"></mt-field>-->
        <!--<mt-field label="交强险下次保险时间" placeholder="请输入交强险下次保险时间" v-model="car.carId"></mt-field>-->
      </template>
      <div class="button-content">
        <div class="button-block-6">
          <mt-button type="default" @click="popupAdd = false">取消</mt-button>
        </div>
        <div class="button-block-6">
          <mt-button type="primary" @click="handleConfirmCar">确定</mt-button>
        </div>
      </div>
    </mt-popup>
    <mt-popup
      v-model="popupNature"
      position="bottom" class="popup-nature">

      <span class="action-add" @click="handleAddNature">新增</span>
      <mt-picker :slots="slotsNature" class="picker" @change="onNatureChange" :visible-item-count="5" ></mt-picker >
      <div class="button-content">
        <mt-button type="primary" @click="handleSure">确认</mt-button>
      </div>
    </mt-popup>


    <mt-popup
      v-model="popupSelectCar"
      position="right" class="popup-nature" style="width: 90%">

      <selectCar @carData="getCarData"></selectCar>
    </mt-popup>
  </div>
</template>

<script>
  import {MessageBox,Toast} from 'mint-ui'
  import selectCar from '../common/select-car-brand.vue'
export default {
  props:{
    title:String,
  },
  components:{
    selectCar
  },
  data(){
    return{
      car:{
        name:'',
        carNo:'',
        carOwner:'',
        phone:'',
        carModel:'',
        vin:'',
      },
      carType:'',
      popupAdd:false,
      customerType:[{
        name:'客户档案'
      },{
        name:'绑定车辆'
      }],
      currentType:'0',
      typeNature:[],
      payList:[],
      popupNature:false,
      popupType:false,
      testNature:'',
      testType:'',
      slotsType: [
        {
          flex: 1,
          values: ['客户','供应商'],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      slotsNature: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      myCarList:[],
      popupSelectCar:false,
      post:{
        deletedCarList:[],
        insertedCarList:[],
        customerNatureId:'',
        customerNature:'请选择',
        bartererCode: '',
        bartererName: '',
        bartererShortName: '',
        settlementId: '',
        telephone: '',
        address: '',
        remarts: '',
        bartererId:'',
      }
    }
  },
  mounted(){
    this.getDataPay();

    this.getDataCustomer();


  },
  methods:{

    /** 获取客户性质 **/
    getDataCustomer() {
      this.slotsNature[0].values=[]
      this.typeNature=[];
      this.post.customerNatureId='';
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/customernature!getCustomernatureList.do',
        data:params
      }).then((res)=>{
        console.log(res.data.rows,1111)

      for(var i=0;i<res.data.rows.length;i++){
        this.slotsNature[0].values.push(res.data.rows[i].customerNature)
        var item={
          name:res.data.rows[i].customerNature,
          id:res.data.rows[i].customerNatureId
        }
        this.typeNature.push(item);
      }
      if(this.$route.query.id!=undefined){

        /**获取客户详情**/
        var params = new URLSearchParams();
        params.append('form.customerId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/app/customerApp!customerDetail.do',
          data:params
        }).then((res)=>{
          console.log(res,1111)
        this.post.bartererCode=res.data.object.bartererCode
        this.post.bartererName=res.data.object.bartererName
        this.post.bartererShortName=res.data.object.bartererShortName
        this.post.telephone=res.data.object.telephone
        this.post.address=res.data.object.address
        this.post.remarts=res.data.object.remarts
        this.post.settlementId=res.data.object.settlementId
        this.post.customerNatureId=res.data.object.customerNatureId
        this.post.bartererId=res.data.object.bartererId

        for(var i=0;i<this.typeNature.length;i++){
          if(this.typeNature[i].id==this.post.customerNatureId){
            this.post.customerNature=this.typeNature[i].name
          }
        }
      });

       /**获取绑定的车辆**/
        var params = new URLSearchParams();
        params.append('form.customerId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/vehicle!getVehicleList.do',
          data:params
        }).then((res)=>{
          this.myCarList=res.data.rows;
          console.log(res,1111)
      });
      }
    })
    },

    getDataPay() {
      var params = new URLSearchParams();
      params.append('page','1');
      params.append('rows','100');
      this.$axios({
        method: 'post',
        url:'gp/bu/settlement!getSettlementList.do',
        data:params
      }).then((res)=>{
        this.payList=res.data.rows

    })
    },
    handleChange(item, index){
      this.currentType = index;
    },
    handleCancel(){
      this.$emit('customerAddClose')
    },
    handleSelectNature(){
      this.popupNature=true
    },
    onNatureChange(picker, values){
      this.testNature=values[0];

    },
    onTypeChange(picker, values){
      this.testType=values[0]
    },
    handleSelectType(){
      this.popupType=true
    },
    handleSure(){
      this.post.customerNature=this.testNature

      for(var i=0;i<this.typeNature.length;i++){
        if(this.typeNature[i].name==this.post.customerNature){
          this.post.customerNatureId=this.typeNature[i].id
        }
      }
      this.popupNature=false
    },

    handleCar(type,item){
      console.log(type,item)
      this.carType=type;
      if(type=='edit'){
        this.car=item
      }else{
        this.car={
          carNo:'',
          carOwner:'',
          phone:'',
          carModel:'',
          vin:'',
        }
      }
      this.popupAdd=true;
    },
    handleDelete(item,index){
      this.myCarList.splice(index,1);
      if(item.customerId!=undefined){
        this.post.deletedCarList.push(item);
      }else{
        for(var i=0;i<this.post.insertedCarList.length;i++){
          if(this.post.insertedCarList[i].carNo==item.carNo){

            this.post.insertedCarList.splice(i,1);
          }
        }
      }
    },
    handleAddNature(){
      MessageBox.prompt(' ', '添加客户性质', {inputPlaceholder: '请输入客户性质'}).then(({ value, action }) => {
      if(value=='' || value==null){
        console.log(value,111)
        Toast({
          message: '请填写客户性质',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.customerNature',value);
      this.$axios({
        method: 'post',
        url:'gp/bu/customernature!saveCustomernature.do',
        data:params
      }).then((res)=>{
        console.log(res,1111)
      this.getDataCustomer();
    });
    })
    },
    handleSurePost(){

      if(this.post.customerNatureId==''){
        Toast({
          message: '请选择客商性质',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.post.bartererName==''){
        Toast({
          message: '请填写客商名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.post.settlementId==''){
        Toast({
          message: '请选择结算方式',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.customerNatureId',this.post.customerNatureId);
      params.append('form.bartererName',this.post.bartererName);
      params.append('form.bartererShortName',this.post.bartererShortName);
      params.append('form.settlementId',this.post.settlementId);
      params.append('form.telephone',this.post.telephone);
      params.append('form.address',this.post.address);
      params.append('form.remarts',this.post.remarts);
      params.append('form.inserted',JSON.stringify(this.post.insertedCarList));
      if(this.$route.query.id){
        params.append('form.customerId',this.$route.query.id);
        params.append('form.bartererCode',this.post.bartererCode);
        params.append('form.bartererId',this.post.bartererId);
        params.append('form.deleted',JSON.stringify(this.post.deletedCarList));
      }else{

        params.append('form.bartererCode','NewBill');
      }

      this.$axios({
        method: 'post',
        url:'gp/app/customerApp!saveCustomer.do',
        data:params
      }).then((res)=>{


        if(res.data.result==true){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
        setTimeout(()=>{
          this.$router.push({path:'/customer-management'})
      },1500)
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
      }

    })

    },
    handleConfirmCar(){
      if(this.car.carNo==''){
        Toast({
          message: '请输入车牌号',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      if(this.carType=='add'){
        for(var i=0;i<this.myCarList.length;i++){
          if(this.myCarList[i].carNo==this.car.carNo){
            Toast({
              message: '该车牌号已绑定',
              position: 'middle',
              duration: 1000
            });
            return false;
          }
        }
        console.log(this.car,111)
        this.myCarList.push(this.car)
      }
      this.post.insertedCarList.push(this.car)
      this.popupAdd=false;
    },
    handleSelectCar(){
      this.popupSelectCar=true;
    },
    getCarData(data){
      console.log(data)
      this.car.name=data.brand+'>'+data.series+'>'+data.carModel
      this.car.brand=data.brand
      this.car.brandId=data.brandId
      this.car.factory=data.factory
      this.car.factoryId=data.factoryId
      this.car.series=data.series
      this.car.seriesId=data.seriesId
      this.car.carModel=data.carModel
      this.car.carModelId=data.carModelId
      this.popupSelectCar=false;
    }
  }
}
</script>
<style>
  .customer-add-edit{
    padding:44px 0 0;
  }
  .customer-add-edit .module-info{
    margin:0 0 12px;
  }
  .customer-add-edit .module-other{
    margin:0 0 12px;
  }
  .customer-add-edit .module-note{
    background: #fff;
    display: flex;
    padding:12px;
  }
  .customer-add-edit .module-note .note-title{
    font-size: 16px;
    width: 105px;
  }
  .customer-add-edit .module-note .note-textarea{
    width: 70%;
    height:60px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:0 10px;
    font-size: 16px;
    text-align: right;
  }
  .customer-add-edit .button-content{
    display: flex;
    padding:24px 36px;
  }
  .customer-add-edit .button-content .mint-button{
    width: 100%;
  }
  .customer-add-edit .button-content .mint-button--primary{
    background:#007EE5;
  }
  .customer-add-edit .module-info .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .customer-add-edit .module-other .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }

  .customer-add-edit .popup-nature{
    width: 100%;
  }
  .customer-add-edit .action-add{
    position: absolute;
    top:18px;
    right:12px;
    color: #fff;
    font-size:14px;
    border-radius:3px;
    background:#007EE5;
    padding:6px 12px;
    text-align: center;
    z-index: 1000;
  }
  .customer-add-edit .select-operator{
    width: 100%;
    min-height:32px;
    border:none;
    outline:none;
    font-size: 16px;
    color: #666;
    background: none;
    text-align: right;
    /*direction: rtl;*/
  }
  .mint-field-select .mint-cell-title{
    width:70%;
  }
  .customer-add-edit .details-tab-button{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    overflow: hidden;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04);
  }
  .customer-add-edit .details-tab-button .item{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    padding:12px 0;
    font-size:15px;
  }
  .customer-add-edit .details-tab-button .item.active{
    border-bottom: 1px solid #007EE5;
    color: #007EE5;
  }
  .action-add-car{
    background: #fff;
    font-size: 15px;
    padding:16px 12px 4px 12px;
    overflow: hidden;
    /*line-height: 34px;*/
  }
  .action-add-car .iconfont{
    display: block;
    float: right;
    height: 32px;
    color: #007EE5;
    font-size: 22px;
  }
  .module-car .mint-cell{
    position: relative;
  }
  .module-car .icon-shanchu1{
    position: absolute;
    top:14px;
    right:12px;
    color: red;
    font-size: 20px;

  }
  .module-car .mint-cell-wrapper{
    padding: 0 46px 0 12px;
  }
  .customer-add-edit .popup-add{
    height: 100%;
    width: 90%;
  }
  .customer-add-edit .popup-add .button-content{
    background: #fff;
    font-size:0;
    padding:24px;
  }
  .customer-add-edit .popup-add .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .customer-add-edit .popup-add .button-block-6 .mint-button{
    display: block;
    width: 100%;
  }
</style>
